<template>
  <div class="index">
    <van-header title="宁夏青鹏实业有限公司"/>
    <div class="img-container">
      <img :src="require('~/assets/dljzbanner.png')" class="img">
    </div>
    <div class="grid">
      <van-grid icon-size="41px">
        <van-grid-item :icon="require('~/assets/gszc.png')" text="公司注册" to="/companyRegistry"/>
        <van-grid-item :icon="require('~/assets/dljz.png')" text="代理记账" to="/agentBookKeep"/>
        <van-grid-item :icon="require('~/assets/gszx.png')" text="公司注销" to="/companyCancel"/>
        <van-grid-item :icon="require('~/assets/jzzz.png')" text="建筑资质" to="/constructionQualification"/>
      </van-grid>
    </div>
    <section class="about">
      <van-title title="关于我们"/>
      <div class="about-img-container">
        <img :src="require('~/assets/about.png')" class="img"/>
      </div>
      <p class="text">
        宁夏青鹏实业有限公司，是一家以互联网为纽带，以线下服务为基础的新型财务代理记账公司，具有专业的财务和服务团队，智能化和标准化的账务集中处理，使企业在原始单据到税务申报一体化，系统自动化处理，财税风险智能审核等方面，较传统记账行业更具高效性和合理性。业务范围遍及西安市9区4县，在不断发展的道路上，西安无极限财务管理有限公司将一如既往地秉承“稳固与发展携手、求实与创新并进”的优良传统，为客户提供更全面、更优质的服务。
      </p>
    </section>
    <section class="service">
      <van-title title="我们还能为您做什么"/>
      <van-grid icon-size="47px" :border="false" :column-num="2">
        <van-grid-item :icon="require('~/assets/grid2.png')">
          <div slot="text" class="text">
            <h1>专业的团队</h1>
            <div>
              专业会计团队，专业财税团队，一对一服务，帮助企业应对各种财税问题
            </div>
          </div>
        </van-grid-item>
        <van-grid-item :icon="require('~/assets/grid3.png')">
          <div slot="text" class="text">
            <h1>优质的服务</h1>
            <div>
              专业客服24小时在线服务为您答疑解惑
            </div>
          </div>
        </van-grid-item>
        <van-grid-item :icon="require('~/assets/grid1.png')">
          <div slot="text" class="text">
            <h1>透明的价格</h1>
            <div>
              拒绝隐形收费，三流的价格，一流的服务，高质量低成本投入
            </div>
          </div>
        </van-grid-item>
        <van-grid-item :icon="require('~/assets/grid4.png')">
          <div slot="text" class="text">
            <h1>一站式服务</h1>
            <div>
              提供工商注册公司，代理记账，税收筹划，社保等一站式服务
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </section>
    <section class="operation">
      <van-title title="我们还能为您做什么"/>
      <van-grid icon-size="47px" :border="false">
        <van-grid-item v-for="item in list" :key="item.text" :icon="item.icon" :text="item.text"/>
      </van-grid>
    </section>
    <section class="last">
      <van-title title="我们还能为您做什么"/>
      <img src="~/assets/cshg.png"/>
      <van-cell title="为什么代理记账公司价格差异这么大？">
        <template #right-icon>
          <img :src="require('~/assets/arrow.png')" class="right-icon"/>
        </template>
      </van-cell>
      <van-cell title="如何能够选择正确的代理记账服务？">
        <template #right-icon>
          <img :src="require('~/assets/arrow.png')" class="right-icon"/>
        </template>
      </van-cell>
      <van-cell title="代理记账容易出风险的地方有哪些？">
        <template #right-icon>
          <img :src="require('~/assets/arrow.png')" class="right-icon"/>
        </template>
      </van-cell>
      <van-cell title="合理的纳税筹划建议，减少把控不要的企业税务负担？">
        <template #right-icon>
          <img :src="require('~/assets/arrow.png')" class="right-icon"/>
        </template>
      </van-cell>
      <van-cell title="中小企业选择代理记账每月需要交接那些票据？">
        <template #right-icon>
          <img :src="require('~/assets/arrow.png')" class="right-icon"/>
        </template>
      </van-cell>
    </section>
    <van-footer/>
  </div>
</template>

<script>
  import VanTitle from "../components/van-title";
  import VanFooter from "../components/van-footer";
  import VanHeader from "../components/van-header";

  export default {
    components: {VanHeader, VanFooter, VanTitle},
    data() {
      return {
        list: [
          {
            icon: require('~/assets/nssb.png'),
            text: '纳税申报'
          },
          {
            icon: require('~/assets/dljz1.png'),
            text: '代理记账'
          },
          {
            icon: require('~/assets/swch.png'),
            text: '税务筹划'
          },
          {
            icon: require('~/assets/cwgl.png'),
            text: '财务管理'
          },
          {
            icon: require('~/assets/zzsb.png'),
            text: '资质新办'
          },
          {
            icon: require('~/assets/zzsj.png'),
            text: '资质升级'
          },
          {
            icon: require('~/assets/zzyq.png'),
            text: '资质转让'
          },
          {
            icon: require('~/assets/zzyq.png'),
            text: '资质延期'
          }
        ]
      }
    }
  }
</script>

<style scoped lang="less">
  .index {
    .img-container {
      width: 375px;
      height: 175px;
    }

    .img {
      width: 100%;
      height: 100%;
      display: block;
    }

    .grid {
      width: 355px;
      background: #FFFFFF;
      box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
      border-radius: 3px;
      margin: -20px auto 0;
    }

    .about {
      padding: 0 20px;

      .about-img-container {
        margin-top: 30px;
        display: inline-block;
      }

      .text {
        margin-top: 22px;
        margin-bottom: 29px;
        font-size: 12px;
        color: #6B6B6B;
        line-height: 21px;
        text-indent: 2em;
        letter-spacing: 2px;
      }

      border-bottom: 3px solid #EEEEEE;
    }

    .service {
      .text {
        margin-top: 13px;

        h1 {
          font-size: 13px;
          color: #000000;
          text-align: center;
        }

        div {
          font-size: 10px;
          color: #6B6B6B;
          width: 132px;
          margin: 10px auto 30px;
        }
      }

      /deep/ .van-grid-item:nth-of-type(2) > div {
        justify-content: flex-start;
      }

      /deep/ .van-grid {
        margin-top: 13px;
      }

      border-bottom: 3px solid #EEEEEE;
    }

    .operation {
      border-bottom: 3px solid #EEEEEE;

      /deep/ .van-grid {
        .van-icon {
          background: #F4F4F4;
          border-radius: 50%;
          width: 47px;
          text-align: center;

          img {
            width: 22px;
          }
        }
      }
    }

    .last {
      padding: 0 20px 30px;
      border-bottom: 3px solid #EEEEEE;

      > img {
        margin-top: 30px;
        height: 175px;
        width: 100%;
        display: block;
      }

      /deep/ .van-cell {
        padding-left: 0;
        border-bottom: 1px dotted #9D9C9C;;
        align-items: center;

        .van-cell__title {
          font-size: 11px;
          font-weight: 500;
          color: #333333;
        }

        .right-icon {
          width: 15px;
          height: 15px;
        }
      }
    }

  }
</style>
